import React from 'react'
import { Card, Space, Button, Checkbox, Form, Input } from 'antd';
import type { FormProps } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import type { RouteComponentProps } from 'react-router-dom';

type FieldType = {
  username: string;
  password?: string;
  remember?: string;
};

export default function Login(props:RouteComponentProps) {

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    //本地缓存
    localStorage.setItem('token', values.username)
    //跳转到首页
    props.history.push('/admin/home')
  };


  return (
    <div>
      <Card title='蜜雪冰城登录页面' style={{ width: 400, margin: '50px auto' }}>
        <Form
          onFinish={onFinish}
        >
          <Form.Item<FieldType>
            name="username"
            rules={[{ required: true, message: '请输入电话号!' },
              {pattern:/^1[3-9]\d{9}$/,message:'手机号格式错误'}
            ]}
          >
            <Input placeholder='请输入用户名' prefix={<UserOutlined />} />
          </Form.Item>

          <Form.Item<FieldType>
            name="password"
            rules={[{ required: true, message: '请输入密码' }]}
          >
            <Input.Password placeholder='请输入密码' prefix={<LockOutlined />} />
          </Form.Item>


          <Form.Item label={null}>
            <Button type="primary" block htmlType="submit">
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  )
}
